<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>前端库</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.6 -->
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="dist/font-awesome-4.7.0/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="dist/ionicons-2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
  <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
        page. However, you can choose any other skin. Make sure you
        apply the skin class to the body tag so the changes take effect.
  -->
  <link rel="stylesheet" href="dist/css/skins/skin-blue.min.css">
		<link rel="shortcut icon" href="http://likexia.gitee.io/tools/lib/img/h5.png" type="image/x-icon">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <!-- Main Header -->
  <header class="main-header">

    <!-- Logo -->
    <a href="index.html" class="logo">
      <!-- mini logo for sidebar mini 50x50 pixels -->
      <span class="logo-mini"><b>库</b></span>
      <!-- logo for regular state and mobile devices -->
      <span class="logo-lg"><b>前端库</b></span>
    </a>

    <!-- Header Navbar -->
    <nav class="navbar navbar-static-top" role="navigation">
      <!-- Sidebar toggle button-->
      <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
        <span class="sr-only">Toggle navigation</span>
      </a>
      <!-- Navbar Right Menu -->
      
    </nav>
  </header>
  <!-- Left side column. contains the logo and sidebar -->
  <aside class="main-sidebar">

    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">

      <!-- Sidebar Menu -->
      <ul class="sidebar-menu">
        <li class="header">前端导航</li>
        <!-- Optionally, you can add icons to the links -->
        <li>
          <a href="index.html"><i class="fa fa-dashboard"></i> <span>常用网站</span> </a>
        </li>
        <li class="treeview">
          <a href="#"><i class="fa  fa-html5"></i> <span>HTML</span> <i class="fa fa-angle-left pull-right"></i></a>
          <ul class="treeview-menu">
            <li><a href="html1.html"><i class="fa fa-circle-o"></i>布局</a></li>
            <li><a href="html2.html"><i class="fa fa-circle-o"></i>效果</a></li>
          </ul>
        </li>
        <li class="treeview active">
          <a href="#"><i class="fa fa-css3"></i> <span>CSS</span> <i class="fa fa-angle-left pull-right"></i></a>
          <ul class="treeview-menu">
            <li class="active"><a href="css1.html"><i class="fa fa-circle-o"></i>常用</a></li>
            <li><a href="css2.html"><i class="fa fa-circle-o"></i>片段</a></li>
          </ul>
        </li>
        <li class="treeview">
          <a href="js.html"><i class="fa  fa-superscript"></i> <span>JS</span> <i class="fa fa-angle-left pull-right"></i></a>
          <ul class="treeview-menu">
            <li><a href="js1.html"><i class="fa fa-circle-o"></i>常用</a></li>
            <li><a href="js2.html"><i class="fa fa-circle-o"></i>片段</a></li>
          </ul>
        </li>
        <li class="treeview">
          <a href="#"><i class="fa fa-superscript"></i> <span>项目导航</span> <i class="fa fa-angle-left pull-right"></i></a>
          <ul class="treeview-menu">
            <li><a href="smallsite.html"><i class="fa fa-circle-o"></i>项目</a></li>
            <li><a href="libs.html"><i class="fa fa-circle-o"></i>公用库</a></li>
            <li><a href="muban.html"><i class="fa fa-circle-o"></i>我的模板</a></li>
          </ul>
        </li>
      </ul>
      <!-- /.sidebar-menu -->
    </section>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        常用Css收藏
        <small>介绍</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="index.html"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li class="active">当前</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">

     <div class="row">
<!--start-->
        <div class="col-md-6">
          <div class="box box-warning collapsed-box">
            <div class="box-header with-border">
              <h3 class="box-title">iOS-使用自定义字体-苹方字体</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                </button>
              </div>
              <!-- /.box-tools -->
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <xmp>苹方提供了六个字重，font-family 定义如下：
苹方-简 常规体
font-family: PingFangSC-Regular, sans-serif;
苹方-简 极细体
font-family: PingFangSC-Ultralight, sans-serif;
苹方-简 细体
font-family: PingFangSC-Light, sans-serif;
苹方-简 纤细体
font-family: PingFangSC-Thin, sans-serif;
苹方-简 中黑体
font-family: PingFangSC-Medium, sans-serif;
苹方-简 中粗体
font-family: PingFangSC-Semibold, sans-serif;</xmp>
              苹方除了简体的：苹方-简（PingFang SC），还为繁体用户提供有：苹方-繁（PingFang TC） ，苹方-港（PingFang HK）
            <h3>苹方-繁 的 CSS font-family 使用：</h3>
              <xmp>font-family: PingFangTC-Regular, sans-serif;
font-family: PingFangTC-Ultralight, sans-serif;
font-family: PingFangTC-Light, sans-serif;
font-family: PingFangTC-Thin, sans-serif;
font-family: PingFangTC-Medium, sans-serif;
font-family: PingFangTC-Semibold, sans-serif;</xmp>
              <h3>苹方-港 的 CSS font-family 使用：</h3>
              <xmp>font-family: PingFangHK-Regular, sans-serif;
font-family: PingFangHK-Ultralight, sans-serif;
font-family: PingFangHK-Light, sans-serif;
font-family: PingFangHK-Thin, sans-serif;
font-family: PingFangHK-Medium, sans-serif;
font-family: PingFangHK-Semibold, sans-serif;</xmp>
           现在的项目中都会使用自定义字体，而iOS9其中的一项新特性就是用新的「苹方」字体替代了已经使用了几年的「华文黑体」，所以现在记录一下iOS如何导入并在项目中使用苹方字体的使用。
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
        <!--end-->
        <!--start-->
        <div class="col-md-6">
          <div class="box box-success collapsed-box">
            <div class="box-header with-border">
              <h3 class="box-title">Css解决各类居中问题</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                </button>
              </div>
              <!-- /.box-tools -->
            </div>
            <!-- /.box-header -->
            <div class="box-body">
             CSS里实现水平居中非常容易，inline元素用text-align:center; block元素用margin:auto;就行了。
              <h3>div中img水平居中：</h3>
              <xmp>{ 
  display:table;
  margin:0 auto;
}</xmp>
            <h3>img与span水平对齐:</h3>
              <xmp>{
  display: flex; 
  align-items:center;
}</xmp>
              <h3>div中div水平居中（不知宽度&设置position：absolute情况下）:</h3>
              <xmp>{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}</xmp>
              <h3>div中span垂直居中：</h3>
              <xmp>{
  vertical-align: middle;
}</xmp>
            <h3>Flex弹性盒子：用flex实现垂直居中（父元素body，子元素main）</h3>
              <xmp>body{ 
  display:flex; 
  align-items:center; 
}
main{ 
  display:flex;
  align-items:center;
  justify-content:center; 
  flex-direction:column;
}</xmp>
              <h3>绝对定位：实现整体居中（已知宽高度情况下）</h3>
              <xmp>main { 
  position: absolute;
  width: 18em;
  height: 10em;
  top: 50%;
  left: 50%;
  margin-top: -9em; 
margin-left: -5em;
}</xmp>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
        <!--end-->
        <!--start-->
        <div class="col-md-6">
          <div class="box box-danger collapsed-box">
            <div class="box-header with-border">
              <h3 class="box-title">文字颜色渐变</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                </button>
              </div>
              <!-- /.box-tools -->
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <h3>CSS</h3>
              <xmp>.text-gradient {  
    display: inline-block;
    color: green;
    font-size: 10em;
    font-family: '微软雅黑';
    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
    /*多色渐变*/
    /*background:-webkit-linear-gradient(left,#f00,#ff0 25%,#0f0 40%,#0ff 55%,#00f 70%,#f00);*/
    -webkit-background-clip: text;/*只有webkit内核支持text的剪切模式*/
    -webkit-text-fill-color: transparent;
};</xmp>
            <h3>HTML</h3>
              <xmp><h2 class="text-gradient">文字渐变</h2></xmp>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
        <!--end-->
        <!--start-->
        <div class="col-md-6">
          <div class="box box-primary collapsed-box">
            <div class="box-header with-border">
              <h3 class="box-title">CSS3文字边框  </h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                </button>
              </div>
              <!-- /.box-tools -->
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <h3>-webkit-text-stroke</h3>
              <xmp>h3 {
color: transparent;
-webkit-text-stroke: 4px red;
}</xmp>
           <h3>text-shadow</h3>
           <xmp>h3{text-shadow: 0 1px red, 1px 0 red, -1px 0 red, 0 -1px red;}
           </xmp>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
        <!--end-->
        <!--start-->
        <div class="col-md-6">
          <div class="box box-warning collapsed-box">
            <div class="box-header with-border">
              <h3 class="box-title">CSS3禁选文本：user-select</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                </button>
              </div>
              <!-- /.box-tools -->
            </div>
            <!-- /.box-header -->
            <div class="box-body">
             <h3>IE</h3>
              <xmp>-ms-user-select 可设置 4 个值：
text – 可以选择文本
element – 可以选择文本，但选择范围受元素边界的约束
none – 不可以选择文本
auto – 如果该元素包含可编辑的文本（如输入元素或可编辑内容的元素），则可以选择文本。否则，元素内容是否可选择由父节点的值决定。</xmp>
            <h3>火狐&谷歌</h3>
              <xmp>谷歌：-webkit-user-select 
火狐：-moz-user-select
取值：
auto   默认值，用户可以选中元素中的内容
none  用户不能选择元素中的任何内容
text   用户可以选择元素中的文本
element  文本可选，但仅限元素的边界内(只有IE和FF支持)
all   在编辑器内，如果双击/上下文点击发生在子元素上，改值的最高级祖先元素将被选中。
-moz-none firefox私有，元素和子元素的文本将不可选，但是，子元素可以通过text重设回可选。</xmp>
              <h3>JS</h3>
              <xmp>3</xmp>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
        <!--end-->
        <!--start-->
        <div class="col-md-6">
          <div class="box box-success collapsed-box">
            <div class="box-header with-border">
              <h3 class="box-title">全兼容1px边框</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                </button>
              </div>
              <!-- /.box-tools -->
            </div>
            <!-- /.box-header -->
            <div class="box-body">
            <h3>方法一：</h3>
            <xmp>.u-1px {
  position: relative;
  width: 100px;
  height: 100px;
}

.u-1px::after {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #000;
  box-sizing: border-box;
}

@media (-webkit-device-pixel-ratio: 1.5) {
  .u-1px::after {
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    width: 150%;
    height: 150%;
    border: 1px solid #000;
    transform: scale(0.66666);
    transform: -origin: left top;
    box-sizing: border-box;
  }
}

@media (-webkit-device-pixel-ratio: 2) {
  .u-1px::after {
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 200%;
    border: 1px solid #000;
    transform: scale(0.5);
    transform: -origin: left top;
    box-sizing: border-box;
  }
}
</xmp>
             <h3>方法二：</h3>
              <xmp>.ui-border-t {
	border-top: 1px solid #e0e0e0;
}
.ui-border-b {
	border-bottom: 1px solid #e0e0e0;
}
.ui-border-tb {
	border-top: #e0e0e0 1px solid;
	border-bottom: #e0e0e0 1px solid;
	background-image: none;
}
.ui-border-l {
	border-left: 1px solid #e0e0e0;
}
.ui-border-r {
	border-right: 1px solid #e0e0e0;
}
.ui-border {
	border: 1px solid #e0e0e0;
}
.ui-border-radius {
	border: 1px solid #e0e0e0;
	border-radius: 4px;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
	.ui-border-radius {
		position: relative;
		border: 0;
	}
	.ui-border-radius:before {
		content: "";
		width: 200%;
		height: 200%;
		position: absolute;
		top: 0;
		left: 0;
		border: 1px solid #e0e0e0;
		-webkit-transform: scale(0.5);
		-webkit-transform-origin: 0 0;
		padding: 1px;
		-webkit-box-sizing: border-box;
		border-radius: 8px;
		pointer-events: none;
	}
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
	.ui-border {
		position: relative;
		border: 0;
	}
	.ui-border-t,
	.ui-border-b,
	.ui-border-l,
	.ui-border-r,
	.ui-border-tb {
		border: 0;
	}
	.ui-border-t {
		background-position: left top;
		background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0));
	}
	.ui-border-b {
		background-position: left bottom;
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0));
	}
	.ui-border-t,
	.ui-border-b,
	.ui-border-tb {
		background-repeat: repeat-x;
		-webkit-background-size: 100% 1px;
	}
	.ui-border-tb {
		background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)), -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0));
		background-position: top, bottom;
	}
	.ui-border-l {
		background-position: left top;
		background-image: -webkit-gradient(linear, right top, left top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0));
	}
	.ui-border-r {
		background-position: right top;
		background-image: -webkit-gradient(linear, left top, right top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0));
	}
	.ui-border-l,
	.ui-border-r {
		background-repeat: repeat-y;
		-webkit-background-size: 1px 100%;
	}
	.ui-border:after {
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)), -webkit-gradient(linear, left top, right top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)), -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)), -webkit-gradient(linear, right top, left top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0));
		-webkit-background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
		background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
		background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
		background-repeat: no-repeat;
		background-position: top, right, bottom, left;
		padding: 1px;
		-webkit-box-sizing: border-box;
		z-index: 10;
		pointer-events: none;
	}
}</xmp>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
        <!--end-->
        <!--start-->
        <div class="col-md-6">
          <div class="box box-danger collapsed-box">
            <div class="box-header with-border">
              <h3 class="box-title">CSS实现单行、多行文本溢出显示省略号（…）</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                </button>
              </div>
              <!-- /.box-tools -->
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <h3>单行</h3>
              <xmp>{overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;}</xmp>
            <h3>多行</h3>
              <xmp>{display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;}</xmp>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
        <!--end-->
        <!--start-->
        <div class="col-md-6">
          <div class="box box-primary collapsed-box">
            <div class="box-header with-border">
              <h3 class="box-title">字体引用</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                </button>
              </div>
              <!-- /.box-tools -->
            </div>
            <!-- /.box-header -->
            <div class="box-body">
             字体后缀和浏览器有关，如下所示<br>
* .TTF或.OTF，适用于Firefox 3.5、Safari、Opera <br>
* .EOT，适用于Internet Explorer 4.0+ <br>
* .SVG，适用于Chrome、IPhone 
              <h3>单个格式</h3>
              <xmp>@font-face{
    font-family: 'YaHei Consolas Hybrid';
    src : url('../fonts/yaheiconsolashybrid.ttf');
}

body{
    font-family: 'YaHei Consolas Hybrid';
    font-size: 16px;
    background: url(../img/bgContent.png) repeat;
}</xmp>
            <h3>多个格式</h3>
              <xmp>@font-face {
    font-family: 'HansHandItalic';
    src: url('fonts/hanshand-webfont.eot');
    src: url('fonts/hanshand-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/hanshand-webfont.woff') format('woff'),
         url('fonts/hanshand-webfont.ttf') format('truetype'),
         url('fonts/hanshand-webfont.svg#webfont34M5alKg') format('svg');
    font-weight: normal;
    font-style: normal;
}</xmp>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
        <!--end-->
        <!--start-->
        <div class="col-md-6">
          <div class="box box-warning collapsed-box">
            <div class="box-header with-border">
              <h3 class="box-title">Flex布局</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                </button>
              </div>
              <!-- /.box-tools -->
            </div>
            <!-- /.box-header -->
            <div class="box-body">
             <h3>容器样式</h3>
              <xmp>.box{
    display: flex | -webkit-flex | inline-flex; | -webkit-inline-flex;
    /*flex布局：默认 | webkit内核 | flex行内 | flex行内webkit内核*/
    
    flex-direction: row | row-reverse | column | column-reverse;
    /*主轴方向：左到右（默认） | 右到左 | 上到下 | 下到上*/
 
    flex-wrap: nowrap | wrap | wrap-reverse;
    /*换行：不换行（默认） | 换行 | 换行并第一行在下方*/
 
    flex-flow: <flex-direction> || <flex-wrap>;
    /*主轴方向和换行简写*/
 
    justify-content: flex-start | flex-end | center | space-between | space-around;
    /*主轴对齐方式：左对齐（默认） | 右对齐 | 居中对齐 | 两端对齐 | 平均分布*/
 
    align-items: flex-start | flex-end | center | baseline | stretch;
    /*交叉轴对齐方式：顶部对齐（默认） | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/
 
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    /*多主轴对齐：顶部对齐（默认） | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 上下平均分布*/
}</xmp>
            <h3>子元素属性</h3>
              <xmp>.item{
    order: <integer>;
    /*排序：数值越小，越排前，默认为0*/
 
    flex-grow: <number>; /* default 0 */
    /*放大：默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小，以此类推）*/
 
    flex-shrink: <number>; /* default 1 */
    /*缩小：默认1（如果空间不足则会缩小，值为0不缩小）*/
 
    flex-basis: <length> | auto; /* default auto */
    /*固定大小：默认为0，可以设置px值，也可以设置百分比大小*/
 
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    /*flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，*/
 
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
    /*单独对齐方式：自动（默认） | 顶部对齐 | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/
}</xmp>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
        <!--end-->
        <!--start-->
        <div class="col-md-6">
          <div class="box box-success collapsed-box">
            <div class="box-header with-border">
              <h3 class="box-title">CSS3 [attribute*=value] 选择器</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                </button>
              </div>
              <!-- /.box-tools -->
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <h3>class中含有ico-的对象</h3>
              <xmp>[class*="ico-"] </xmp>
            <h3>class以ico-开始的对象</h3>
              <xmp>[class^="ico-"] </xmp>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
        <!--end-->
        <!--start-->
        <div class="col-md-6">
          <div class="box box-danger collapsed-box">
            <div class="box-header with-border">
              <h3 class="box-title">背景颜色半透明，文字不透明</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                </button>
              </div>
              <!-- /.box-tools -->
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <h3>CSS</h3>
              <xmp>background: rgba(255, 255, 255, 0.3) !important; /* IE无效，FF有效 */  
            background: #fff;  
            filter: alpha(opacity=30);</xmp>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
        <!--end-->
        <!--start-->
        <div class="col-md-6">
          <div class="box box-primary collapsed-box">
            <div class="box-header with-border">
              <h3 class="box-title">CSS清除浮动</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                </button>
              </div>
              <!-- /.box-tools -->
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <h3>1、结尾处加空div标签</h3>
              <xmp>.clearfloat{clear:both} </xmp>
            <h3>2、父级div定义 伪类:after 和 zoom </h3>
              <xmp>.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
.clearfloat{zoom:1}</xmp>
              <h3>JS</h3>
              <xmp>3</xmp>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
        <!--end-->
        <!--start-->
        <div class="col-md-6">
          <div class="box box-danger collapsed-box">
            <div class="box-header with-border">
              <h3 class="box-title">禁止微信网页点图片弹出预览</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                </button>
              </div>
              <!-- /.box-tools -->
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <h3>CSS</h3>
              <xmp>img{pointer-events: none;}</xmp>
              <h3>JS</h3>
              <xmp>$(".bg-top,.bg").click(function() {
return false;
})</xmp>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
        <!--end-->
        <!--start-->
        <div class="col-md-6">
          <div class="box box-primary collapsed-box">
            <div class="box-header with-border">
              <h3 class="box-title">标题</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                </button>
              </div>
              <!-- /.box-tools -->
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <h3>CSS</h3>
              <xmp>1</xmp>
            <h3>HTML</h3>
              <xmp>2</xmp>
              <h3>JS</h3>
              <xmp>3</xmp>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
        <!--end-->
        <!--start-->
        <div class="col-md-6">
          <div class="box box-danger collapsed-box">
            <div class="box-header with-border">
              <h3 class="box-title">标题</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                </button>
              </div>
              <!-- /.box-tools -->
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <h3>CSS</h3>
              <xmp>1</xmp>
            <h3>HTML</h3>
              <xmp>2</xmp>
              <h3>JS</h3>
              <xmp>3</xmp>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
        <!--end-->
        <!--start-->
        <div class="col-md-6">
          <div class="box box-primary collapsed-box">
            <div class="box-header with-border">
              <h3 class="box-title">标题</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                </button>
              </div>
              <!-- /.box-tools -->
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <h3>CSS</h3>
              <xmp>1</xmp>
            <h3>HTML</h3>
              <xmp>2</xmp>
              <h3>JS</h3>
              <xmp>3</xmp>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
        <!--end-->
        <!--start-->
        <div class="col-md-6">
          <div class="box box-danger collapsed-box">
            <div class="box-header with-border">
              <h3 class="box-title">标题</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                </button>
              </div>
              <!-- /.box-tools -->
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <h3>CSS</h3>
              <xmp>1</xmp>
            <h3>HTML</h3>
              <xmp>2</xmp>
              <h3>JS</h3>
              <xmp>3</xmp>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
        <!--end-->
        <!--start-->
        <div class="col-md-6">
          <div class="box box-primary collapsed-box">
            <div class="box-header with-border">
              <h3 class="box-title">标题</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                </button>
              </div>
              <!-- /.box-tools -->
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <h3>CSS</h3>
              <xmp>1</xmp>
            <h3>HTML</h3>
              <xmp>2</xmp>
              <h3>JS</h3>
              <xmp>3</xmp>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
        <!--end-->
        <!--start-->
        <div class="col-md-6">
          <div class="box box-danger collapsed-box">
            <div class="box-header with-border">
              <h3 class="box-title">标题</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                </button>
              </div>
              <!-- /.box-tools -->
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <h3>CSS</h3>
              <xmp>1</xmp>
            <h3>HTML</h3>
              <xmp>2</xmp>
              <h3>JS</h3>
              <xmp>3</xmp>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
        <!--end-->
        <!--start-->
        <div class="col-md-6">
          <div class="box box-primary collapsed-box">
            <div class="box-header with-border">
              <h3 class="box-title">标题</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                </button>
              </div>
              <!-- /.box-tools -->
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <h3>CSS</h3>
              <xmp>1</xmp>
            <h3>HTML</h3>
              <xmp>2</xmp>
              <h3>JS</h3>
              <xmp>3</xmp>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
        <!--end-->
        <!--start-->
        <div class="col-md-6">
          <div class="box box-danger collapsed-box">
            <div class="box-header with-border">
              <h3 class="box-title">标题</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                </button>
              </div>
              <!-- /.box-tools -->
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <h3>CSS</h3>
              <xmp>1</xmp>
            <h3>HTML</h3>
              <xmp>2</xmp>
              <h3>JS</h3>
              <xmp>3</xmp>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
        <!--end-->
        <!--start-->
        <div class="col-md-6">
          <div class="box box-primary collapsed-box">
            <div class="box-header with-border">
              <h3 class="box-title">标题</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                </button>
              </div>
              <!-- /.box-tools -->
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <h3>CSS</h3>
              <xmp>1</xmp>
            <h3>HTML</h3>
              <xmp>2</xmp>
              <h3>JS</h3>
              <xmp>3</xmp>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
        <!--end-->
        <!--start-->
        <div class="col-md-6">
          <div class="box box-danger collapsed-box">
            <div class="box-header with-border">
              <h3 class="box-title">标题</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                </button>
              </div>
              <!-- /.box-tools -->
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <h3>CSS</h3>
              <xmp>1</xmp>
            <h3>HTML</h3>
              <xmp>2</xmp>
              <h3>JS</h3>
              <xmp>3</xmp>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
        <!--end-->
        <!--start-->
        <div class="col-md-6">
          <div class="box box-primary collapsed-box">
            <div class="box-header with-border">
              <h3 class="box-title">标题</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                </button>
              </div>
              <!-- /.box-tools -->
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <h3>CSS</h3>
              <xmp>1</xmp>
            <h3>HTML</h3>
              <xmp>2</xmp>
              <h3>JS</h3>
              <xmp>3</xmp>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
        <!--end-->
        <!--start-->
        <div class="col-md-6">
          <div class="box box-danger collapsed-box">
            <div class="box-header with-border">
              <h3 class="box-title">标题</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                </button>
              </div>
              <!-- /.box-tools -->
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <h3>CSS</h3>
              <xmp>1</xmp>
            <h3>HTML</h3>
              <xmp>2</xmp>
              <h3>JS</h3>
              <xmp>3</xmp>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
        <!--end-->
        <!--start-->
        <div class="col-md-6">
          <div class="box box-primary collapsed-box">
            <div class="box-header with-border">
              <h3 class="box-title">标题</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
                </button>
              </div>
              <!-- /.box-tools -->
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <h3>CSS</h3>
              <xmp>1</xmp>
            <h3>HTML</h3>
              <xmp>2</xmp>
              <h3>JS</h3>
              <xmp>3</xmp>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
        <!--end-->
        </div>

    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

  <!-- Main Footer -->
  <footer class="main-footer">
    <!-- To the right -->
    <div class="pull-right hidden-xs">
      Anything you want
    </div>
    <!-- Default to the left -->
    <strong>Copyright &copy; 2017 <a href="#">Company</a>.</strong> All rights reserved.
  </footer>

  <!-- Add the sidebar's background. This div must be placed
       immediately after the control sidebar -->
  <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<!-- REQUIRED JS SCRIPTS -->

<!-- jQuery 2.2.0 -->
<script src="plugins/jQuery/jQuery-2.2.0.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/app.min.js"></script>

<!-- Optionally, you can add Slimscroll and FastClick plugins.
     Both of these plugins are recommended to enhance the
     user experience. Slimscroll is required when using the
     fixed layout. -->
</body>
</html>
